<template>
  <div class="trend">
    <div class="text" :style="{ color: textColor, fontSize:textSize }">
      <slot v-if="slots.default"></slot>
      <div v-else>{{text}}</div>
    </div>
    <div class="icon">
      <component
          :is="`el-icon-${toLine(upIcon)}`"
          :style="{ color: !reverseColor ? upIconColor : '#52c41a' }"
          v-if="type === 'up'"
      ></component>
      <component
          :is="`el-icon-${toLine(downIcon)}`"
          :style="{ color: !reverseColor ? downIconColor : '#f5222d' }"
          v-else
      ></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, useSlots} from "vue";
import {toLine} from "../../utils";

let props = defineProps({
  type:{
    type: String,
    default:'up'
  },
  text:{
    type:String,
    default:'文字'
  },
  upIconColor:{
    type:String,
    default:'#f5222d'
  },
  downIconColor:{
    type:String,
    default:'#52c41a'
  },
  upTextColor:{
    type:String,
    default:'#f5222d'
  },
  downTextColor:{
    type:String,
    default:'#52c41a'
  },
  reverseColor:{
    type:Boolean,
    default:false
  },
  // 上升趋势显示的图标
  upIcon: {
    type: String,
    default: 'ArrowUp'
  },
  // 下降趋势显示的图标
  downIcon: {
    type: String,
    default: 'ArrowDown'
  },
  textSize:{
    type:String,
    default:'12px'
  }
})

let slots = useSlots()

// 文字颜色
let textColor = computed(() => {
  return props.type === 'up' ? props.upTextColor : props.downTextColor
})
</script>

<style lang="scss" scoped>
.trend{
  display: flex;
  align-items: center;
  .text{
    font-size: 12px;
    margin-right: 4px;
  }
  .icon{
    svg{
      width: 0.8em;
      height: 0.8em;
    }
  }

}
</style>
